<template>
  <backContainer>
    <div class="appraise_container">
      <card>
        <div class="header_search flexBet flexColCenter">
          <div class="flex">
            <div class="ipt_search">
              <el-select @change="getCourse" size="small" class="search" v-model="form.semesterId" placeholder="请选择学期" filterable>
                <el-option v-for="item in schoolSemesterList" :key="item.semesterId" :label="item.semesterName"
                           :value="item.semesterId"
                >
                </el-option>
              </el-select>
              <el-select
                size="small"
                class="search"
                v-model="form.courseId"
                filterable
                clearable
                placeholder="请选择课程"
              >
                <el-option
                  v-for="(item, index) in courses"
                  :key="index"
                  :label="item.courseName"
                  :value="item.courseId"
                >
                </el-option>
              </el-select>
              <el-select
                size="small"
                style="width: 110px"
                v-model="form.classType"
                placeholder="请选择"
                @change="getClass"
              >
                <el-option label="行政班" :value="1"></el-option>
                <el-option label="授课班级" :value="2"></el-option>
              </el-select>
              <el-select
                size="small"
                class="search"
                @visible-change="handleCheck"
                v-model="form.classId"
                filterable
                clearable
                placeholder="请选择班级"
              >
                <template v-if="form.classType == 1">
                  <el-option
                    v-for="(item, index) in classes"
                    :key="index"
                    :label="item.className"
                    :value="item.classId"
                  >
                  </el-option>
                </template>
                <template v-if="form.classType == 2">
                  <el-option
                    v-for="(item, index) in classes"
                    :key="index"
                    :label="item.schedulingName"
                    :value="item.id"
                  >
                  </el-option>
                </template>
              </el-select>
              <el-input
                size="small"
                class="search"
                placeholder="请输入学生姓名"
                v-model="form.studentName"
                clearable
              ></el-input>
              <el-select
                size="small"
                class="search"
                v-model="form.studyStatus"
                filterable
                clearable
                placeholder="请选择状态"
              >
                <el-option
                  v-for="item in statuses"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="getList"
              >搜索
              </el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetForm"
              >重置
              </el-button>
            </div>
          </div>
          <div class="flexColCenter">
            <!-- <div class="capsule flex">
              <div
                :class="['label', form.existExam == '' ? 'active' : '', 'shou']"
                @click="handleExistExam('')"
              >
                全部课程
              </div>
              <div
                :class="[
                  'label',
                  form.existExam !== '' ? 'active' : '',
                  'shou',
                ]"
                @click="handleExistExam(1)"
              >
                考核课程
              </div>
            </div> -->
            <el-button
              v-preventReClick
              type="warning"
              plain
              icon="el-icon-download"
              size="small"
              @click="exportGrade"
            >导出成绩
            </el-button>
          </div>
        </div>
        <div class="content">
          <el-table
            height="calc(100vh - 270px)"
            v-loading="loading"
            :data="studentList"
          >
            <el-table-column
              label="学生姓名"
              align="center"
              prop="studentName"
              width="120"
            />
            <el-table-column
              label="学号"
              sortable
              align="center"
              prop="studentNum"
              width="120"
            />
            <el-table-column
              label="班级"
              align="center"
              prop="className"
              width="120"
            />
            <el-table-column
              label="课程"
              align="center"
              prop="courseName"
              min-width="200"
            />
            <el-table-column
              width="200"
              label="工作站"
              align="center"
              prop="workstationName"
            >
              <template slot-scope="scope">
                <span>{{
                    scope.row.workstationName ? scope.row.workstationName : '--'
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              align="center"
              min-width="120"
              width="120"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.studyStatus == 2">已学习</span>
                <span v-if="scope.row.studyStatus == 1">学习中</span>
                <span v-if="scope.row.studyStatus == 0">未开始</span>
                <span v-if="scope.row.studyStatus == -1">未完成</span>
              </template>
            </el-table-column>

            <el-table-column sortable prop="score" align="center" width="140">
              <template #header>
                <span>
                  课程成绩
                  <el-tooltip class="item" effect="dark" placement="bottom">
                    <i
                      class="el-icon-question shou"
                      style="font-size: 16px; vertical-align: text-top"
                    ></i>
                    <div slot="content">
                      <div>"99"：学生参与所有考核的平均分</div>
                      <div>" "：该课程没有考核内容</div>
                      <div>"-"：学生暂未参与该课程任意步骤考核</div>
                    </div>
                  </el-tooltip>
                </span>
              </template>
              <template slot-scope="scope">
                <span>{{
                    scope.row.score == '-1' ? '--' : scope.row.score
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120">
              <template slot-scope="scope">
                <el-button
                  v-preventReClick
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="toDetail(scope.row)"
                >查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :pageSizes="[15, 30, 60, 120]"
            :page.sync="form.pageNum"
            :limit.sync="form.pageSize"
            @pagination="getList"
          />
        </div>
      </card>
      <el-dialog
        title="选择导出内容"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible="showExportGrade"
        width="520px"
        append-to-body
        @close="cancel()"
      >
        <div class="semester">
          <el-select
            v-model="courseForm.schoolSemesterId"
            placeholder="请选择学期"
          >
            <el-option
              v-for="item in schoolSemesterList"
              :key="item.semesterId"
              :label="item.semesterName"
              :value="item.semesterId"
            >
            </el-option>
          </el-select>
        </div>
        <el-tabs v-model="radio">
          <el-tab-pane label="课程成绩" name="1">
            <div class="sign">
              注：课程不同班级的成绩详情
              <el-popover placement="top" width="300" trigger="click">
                <el-image
                  :preview-src-list="[require('@/assets/images/muban_1.png')]"
                  :src="require('@/assets/images/muban_1.png')"
                ></el-image>
                <el-button
                  class="content_img"
                  icon="el-icon-info"
                  circle
                  slot="reference"
                ></el-button>
              </el-popover>
            </div>
            <el-form
              @submit.native.prevent
              ref="courseForm"
              :model="courseForm"
              :rules="courseFormRules"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="" prop="courseId">
                    <el-select
                      filterable
                      v-model="courseForm.courseId"
                      placeholder="请选择课程"
                    >
                      <el-option
                        v-for="item in courseList"
                        :key="item.courseId"
                        :label="item.courseName"
                        :value="item.courseId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="" prop="classType">
                    <el-select
                      v-model="courseForm.classType"
                      placeholder="请选择"
                    >
                      <el-option label="行政班" :value="1"></el-option>
                      <!--                      <el-option-->
                      <!--                        label="授课班级"-->
                      <!--                        :value="2"-->
                      <!--                      >-->
                      <!--                      </el-option>-->
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="班级成绩" name="2">
            <div class="sign">
              注：班级中不同课程成绩
              <el-popover placement="top" width="300" trigger="click">
                <el-image
                  :preview-src-list="[require('@/assets/images/muban_2.png')]"
                  :src="require('@/assets/images/muban_2.png')"
                ></el-image>
                <el-button
                  class="content_img"
                  icon="el-icon-info"
                  circle
                  slot="reference"
                ></el-button>
              </el-popover>
            </div>
            <el-form
              @submit.native.prevent
              ref="classForm"
              :model="classForm"
              :rules="classFormRules"
            >
              <el-form-item label="" prop="classId">
                <div style="display: flex">
                  <el-select
                    style="width: 90px"
                    v-model="classForm.classType"
                    @change="getClassBySemesterId(courseForm.schoolSemesterId)"
                    placeholder="请选择"
                  >
                    <el-option label="行政班" :value="1"></el-option>
                    <!--                    <el-option-->
                    <!--                      label="授课班级"-->
                    <!--                      :value="2"-->
                    <!--                    >-->
                    <!--                    </el-option>-->
                  </el-select>
                  <el-select
                    filterable
                    v-model="classForm.classId"
                    placeholder="请选择班级"
                  >
                    <el-option
                      v-for="item in classList"
                      :key="item.classId"
                      :label="item.className"
                      :value="item.classId"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="学生成绩" name="3">
            <div class="sign">
              注:某课程、某班级学生成绩详情
              <el-popover placement="top" width="300" trigger="click">
                <el-image
                  :preview-src-list="imgList"
                  :src="item"
                  v-for="(item, index) in imgList"
                  :key="index"
                ></el-image>
                <el-button
                  class="content_img"
                  icon="el-icon-info"
                  circle
                  slot="reference"
                ></el-button>
              </el-popover>
            </div>
            <el-form
              @submit.native.prevent
              ref="scoreForm"
              :model="scoreForm"
              :rules="scoreFormRules"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="" prop="type">
                    <el-select
                      filterable
                      v-model="scoreForm.type"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in typeList"
                        :key="item.id"
                        :label="item.value"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="" prop="courseId">
                    <el-select
                      filterable
                      v-model="scoreForm.courseId"
                      placeholder="请选择课程"
                    >
                      <el-option
                        v-for="item in courseList"
                        :key="item.courseId"
                        :label="item.courseName"
                        :value="item.courseId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="" prop="classId">
                    <el-select
                      style="width: 90px"
                      v-model="scoreForm.classType"
                      @change="getClassByCourseId(scoreForm.courseId)"
                      placeholder="请选择"
                    >
                      <el-option label="行政班" :value="1"></el-option>
                      <!--                      <el-option-->
                      <!--                        label="授课班级"-->
                      <!--                        :value="2"-->
                      <!--                      >-->
                      <!--                      </el-option>-->
                    </el-select>
                    <el-select
                      style="width: 120px"
                      filterable
                      v-model="scoreForm.classId"
                      placeholder="请选择班级"
                    >
                      <el-option
                        v-for="item in classArr"
                        :key="item.classId"
                        :label="item.className"
                        :value="item.classId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="" prop="studentIds">
                    <el-cascader
                      filterable
                      class="school_semester"
                      v-model="scoreForm.studentIds"
                      :show-all-levels="false"
                      collapse-tags
                      :options="studentArr"
                      :props="{
                        emitPath: false,
                        multiple: true,
                        label: 'name',
                        value: 'studentId',
                        children: 'children',
                      }"
                    >
                    </el-cascader>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel"> 取 消</el-button>
          <el-button
            v-show="scoreForm.type != 2"
            @click="previewGrade(radio)"
            type="primary"
          >预 览
          </el-button
          >
          <el-button @click="submitForm(radio)" type="primary">确 认</el-button>
        </div>
      </el-dialog>
      <!-- 成绩详情 -->
      <gradeDetail
        :studentId="studentId"
        :propList="propList"
        :courseType="courseType"
        :open.sync="gradeDetail_open"
        :propCourseStuId="gradeDetail_courseStuId"
      ></gradeDetail>
    </div>
    <el-drawer
      :append-to-body="true"
      size="800px"
      title="成绩预览"
      :visible="showGradeDetail"
      @close="handleClose"
    >
      <div class="grade_detail">
        <div v-html="excelTable"></div>
      </div>
    </el-drawer>
  </backContainer>
</template>

<script>
import gradeDetail from '@/components/gradeDetail'
import { gradesList, getClassList } from '@/api/statistics/statistics'
import {
  getSchoolSemesterList,
  getCourseBySemesterId,
  getClassBySemesterId,
  getClassByCourseId,
  getStudentByClassId,
  getAllSchedulingList
} from '@/api/teach/teach'

export default {
  name: 'gradeList',
  components: { gradeDetail },
  data() {
    return {
      showGradeDetail: false,
      excelTable: '',
      imgList: [
        require('@/assets/images/muban_3.png'),
        require('@/assets/images/muban_4.png')
      ],
      // 成绩详情
      propList: [],
      gradeDetail_courseStuId: '',
      studentId: '',
      gradeDetail_open: false,
      courseType: 3,
      //
      radio: '1',
      showExportGrade: false,
      schoolSemesterList: [],
      courseList: [],
      classList: [],
      classArr: [],
      studentArr: [],
      courseForm: {
        schoolSemesterId: '',
        courseId: '',
        classType: 1
      },
      courseFormRules: {
        courseId: [
          { required: true, message: '请选择课程', trigger: 'change' }
        ]
      },
      classForm: {
        classType: 1,
        classId: ''
      },
      classFormRules: {
        classId: [{ required: true, message: '请选择班级', trigger: 'change' }]
      },
      scoreForm: {
        courseId: '',
        classId: '',
        classType: 1,
        type: 1,
        studentIds: [0]
      },
      scoreFormRules: {
        courseId: [
          { required: true, message: '请选择课程', trigger: 'change' }
        ],
        classId: [{ required: true, message: '请选择班级', trigger: 'change' }]
      },
      //
      studentList: [],
      loading: false,
      showEvaluateForm: false,
      // 总条数
      total: 0,
      //查询参数
      form: {
        // existExam: "",
        classType: 1,
        pageNum: 1,
        pageSize: 15,
        semesterId: '',
        courseId: '',
        classId: '',
        studentName: '',
        studyStatus: ''
      },
      statuses: [
        { label: '已学习', value: 2 },
        { label: '学习中', value: 1 },
        { label: '未开始', value: 0 }
      ],
      classes: [],
      courses: [],
      evaluateForm: {
        evaluate: '',
        uncheckReason: ''
      },
      rules: {},
      evaluateList: [
        {
          id: 1,
          value: '优秀'
        },
        {
          id: 2,
          value: '良好'
        },
        {
          id: 3,
          value: '及格'
        },
        {
          id: 4,
          value: '不及格'
        }
      ],
      typeList: [
        {
          id: 1,
          value: '所有学生一张表格'
        },
        {
          id: 2,
          value: '每名学生一张表格'
        }
      ]
    }
  },
  watch: {
    'courseForm.schoolSemesterId': {
      handler(val) {
        if (val) {
          if (this.radio == 1) {
            this.courseForm.courseId = ''
            this.courseList = []
            this.getCourseBySemesterId(val)
          }
          if (this.radio == 2) {
            this.getClassBySemesterId(val)
          }
          if (this.radio == 3) {
            this.scoreForm.courseId = ''
            this.scoreForm.studentIds = []
            this.scoreForm.classId = ''
            this.courseList = []
            this.studentArr = []
            this.classArr = []
            this.getCourseBySemesterId(val)
          }
        }
      },
      deep: true
    },
    'scoreForm.courseId': {
      handler(val) {
        this.scoreForm.studentIds = []
        this.studentArr = []
        this.getClassByCourseId(val)
      },
      deep: true
    },
    'scoreForm.classId': {
      handler(val) {
        if (val) {
          this.scoreForm.studentIds = []
          this.studentArr = []
          this.getStudentByClassId(val)
        }
      },
      deep: true
    },
    radio: {
      handler(val) {
        this.$refs['courseForm'].resetFields()
        this.$refs['classForm'].resetFields()
        this.$refs['scoreForm'].resetFields()
        if (val == 1) {
          this.courseForm.courseId = ''
          this.courseList = []
          this.getCourseBySemesterId(this.courseForm.schoolSemesterId)
        }
        if (val == 2) {
          this.getClassBySemesterId(this.courseForm.schoolSemesterId)
        }
        if (val == 3) {
          this.scoreForm.courseId = ''
          this.scoreForm.studentIds = []
          this.scoreForm.classId = ''
          this.courseList = []
          this.studentArr = []
          this.classArr = []
          this.getCourseBySemesterId(this.courseForm.schoolSemesterId)
        }
      }
    }
  },
  created() {
    this.form.semesterId = this.$store.getters.schoolInfo.semesterId
  },
  async mounted() {
    if (this.$store.getters.keepTab.indexOf(this.$route.name) == -1) {
      this.$store.dispatch('SetKeepTab', [this.$route.name])
    }
    await this.getSchoolSemester()
    this.getCourse()
    this.getList()
  },
  methods: {
    handleClose() {
      this.showGradeDetail = false
    },
    // 下拉获取班级
    handleCheck(type) {
      if (type) {
        if (!this.form.courseId) {
          this.$message('请先选择课程')
          return
        }
        this.getClass()
      }
    },
    previewGrade(type) {
      let name = {
        1: 'courseForm',
        2: 'classForm',
        3: 'scoreForm'
      }
      this.$refs[name[type]].validate(async(valid) => {
        if (valid) {
          if (type == 1) {
            this.previewExcel(
              `/school/manager/grades/exportClassCourseGrades/${this.courseForm.courseId}/${this.courseForm.schoolSemesterId}`,
              {}
            )
              .then((html) => {
                this.showGradeDetail = true
                this.excelTable = html
              })
              .catch((error) => {
                // 处理错误
                console.error(error)
              })
          }
          if (type == 2) {
            let params = {
              ...this.classForm,
              schoolSemesterId: this.courseForm.schoolSemesterId
            }
            this.previewExcel(
              `/school/manager/grades/exportClassAllCourseGrades/${this.classForm.classId}`,
              params
            )
              .then((html) => {
                this.showGradeDetail = true
                this.excelTable = html
              })
              .catch((error) => {
                // 处理错误
                console.error(error)
              })
          }
          if (type == 3) {
            let params = {
              ...this.scoreForm,
              schoolSemesterId: this.courseForm.schoolSemesterId,
              studentIds: this.scoreForm.studentIds.join(',')
            }
            // 每名学生一张表格  type==2    所有学生一张表格  type==1
            if (this.scoreForm.type == 2) {
              this.$modal.msgWarning('ZIP文件暂不支持预览')
              // this.previewExcel("/school/manager/grades/exportStudentCourseGrades",params)
            } else {
              this.previewExcel(
                '/school/manager/grades/exportStudentCourseGradesIntoOneTable',
                params
              )
                .then((html) => {
                  this.showGradeDetail = true
                  this.excelTable = html
                })
                .catch((error) => {
                  // 处理错误
                  console.error(error)
                })
            }
          }
        }
      })
    },
    submitForm(type) {
      let name = {
        1: 'courseForm',
        2: 'classForm',
        3: 'scoreForm'
      }
      this.$refs[name[type]].validate(async(valid) => {
        if (valid) {
          if (type == 1) {
            let excelName
            for (const courseElement of this.courseList) {
              if (courseElement.courseId == this.courseForm.courseId) {
                excelName = courseElement.courseName + '成绩表'
              }
            }
            this.download(
              `/school/manager/grades/exportClassCourseGrades/${this.courseForm.courseId}/${this.courseForm.schoolSemesterId}`,
              {},
              `${excelName}.xlsx`
            )
          }
          if (type == 2) {
            let excelName
            for (const courseElement of this.classList) {
              if (courseElement.classId == this.classForm.classId) {
                excelName = courseElement.className + '成绩表'
              }
            }
            this.download(
              `/school/manager/grades/exportClassAllCourseGrades/${this.classForm.classId}`,
              {
                ...this.classForm,
                schoolSemesterId: this.courseForm.schoolSemesterId
              },
              `${excelName}.xlsx`
            )
          }
          if (type == 3) {
            let courseName
            for (const courseElement of this.courseList) {
              if (courseElement.courseId == this.scoreForm.courseId) {
                courseName = `《${courseElement.courseName}》`
              }
            }
            let params = {
              ...this.scoreForm,
              schoolSemesterId: this.courseForm.schoolSemesterId,
              studentIds: this.scoreForm.studentIds.join(',')
            }
            // if (this.scoreForm.studentIds && this.scoreForm.studentIds.length == 1) {
            //   for (const courseElement of this.studentArr) {
            //     if (courseElement.studentId == this.scoreForm.studentIds[0]) {
            //       excelName = courseElement.name + courseName + '成绩'
            //     }
            //   }
            //   this.download('/school/manager/grades/exportStudentCourseGrades', { ...params }, `${excelName}.xlsx`)
            // } else {
            let zipName
            for (const courseElement of this.classArr) {
              if (courseElement.classId == this.scoreForm.classId) {
                zipName = courseElement.className + courseName + '成绩表'
              }
            }
            // 每名学生一张表格  type==2    所有学生一张表格  type==1
            if (this.scoreForm.type == 2) {
              this.download(
                '/school/manager/grades/exportStudentCourseGrades',
                { ...params },
                `${zipName}.zip`
              )
            } else {
              this.download(
                '/school/manager/grades/exportStudentCourseGradesIntoOneTable',
                { ...params },
                `${zipName}.xlsx`
              )
            }

            // }
          }
        }
      })
    },

    // 获取学期列表
    async getSchoolSemester() {
      let res = await getSchoolSemesterList()
      const { code, rows } = res
      if (code == 200) {
        this.schoolSemesterList = rows
        this.courseForm.schoolSemesterId =
          this.$store.getters.schoolInfo.semesterId
        this.classForm.schoolSemesterId =
          this.$store.getters.schoolInfo.semesterId
        this.scoreForm.schoolSemesterId =
          this.$store.getters.schoolInfo.semesterId
      }
    },
    // 获取课程列表
    async getCourseBySemesterId(id) {
      let params = {
        teacherId: this.$store.getters.teacherId
      }
      let res = await getCourseBySemesterId(id, params)
      const { code, data } = res
      if (code == 200) {
        this.courseList = data
      }
    },
    // 获取班级列表
    async getClassBySemesterId(id) {
      this.classForm.classId = ''
      this.classList = []
      let params = {
        teacherId: this.$store.getters.teacherId,
        classType: this.classForm.classType
      }
      let res = await getClassBySemesterId(id, params)
      const { code, data } = res
      if (code == 200) {
        this.classList = data
      }
    },
    // 通过课程Id查询班级列表
    async getClassByCourseId(id) {
      this.scoreForm.classId = ''
      this.classArr = []
      if (!id) {
        return
      }
      let params = {
        teacherId: this.$store.getters.teacherId,
        classType: this.scoreForm.classType
      }
      let res = await getClassByCourseId(id, params)
      const { code, data } = res
      if (code == 200) {
        this.classArr = data
      }
    },
    // 获取班级Id查询学生列表
    async getStudentByClassId(id) {
      let res = await getStudentByClassId(id)
      const { code, data } = res
      if (code == 200) {
        let obj = {
          name: '全选',
          studentId: 0,
          children: data
        }
        if (data.length > 0) {
          this.studentArr = [obj]
          this.scoreForm.studentIds.push(0)
          data.forEach((item) => {
            this.scoreForm.studentIds.push(item.studentId)
          })
        } else {
          this.studentArr = []
        }
      }
    },
    toDetail(item) {
      console.log(this.studentList, item)
      this.gradeDetail_open = true
      this.courseType = item.courseType
      this.studentId = item.studentId
      this.propList = JSON.parse(JSON.stringify(this.studentList))
      this.gradeDetail_courseStuId = item.ccCourseStuId
    },
    // 初始化获取课程列表
    async getCourse() {
      let params = {
        teacherId: this.$store.getters.teacherId
      }
      let res = await getCourseBySemesterId(this.form.semesterId, params)
      if (res.code == 200) {
        this.courses = res.data
      }
    },
    // 初始化获取班级列表
    async getClass() {
      this.form.classId = ''
      this.classes = []
      if (this.form.classType == 1) {
        let params = {
          pageNum: 1,
          pageSize: 9999,
          courseId: this.form.courseId,
          semesterId: this.form.semesterId,
          userId: this.$store.getters.userId
        }
        let res = await getClassList(params)
        this.classes = res.rows
      } else {
        let params = {
          courseId: this.form.courseId,
          userId: this.$store.getters.userId,
          semesterId: this.form.semesterId
        }
        let res = await getAllSchedulingList(params)
        this.classes = res.data
      }
    },
    // 初始化获取学生列表
    async getList() {
      this.loading = true
      let res = await gradesList(this.form)
      const { rows, total, code } = res
      if (code == 200) {
        rows.forEach((value) => {
          if (value.score || value.score == '0') {
            value.score = value.score
          } else {
            value.score = -1
          }
        })
        this.studentList = rows
        this.total = total
        this.loading = false
      } else {
        this.loading = false
      }
    },
    resetForm() {
      this.form = {
        classType: 1,
        pageNum: 1,
        pageSize: 15,
        courseId: '',
        classId: '',
        studentName: '',
        semesterId: '',
        status: ''
      }
      this.getList()
    },
    exportGrade() {
      this.showExportGrade = true
    },
    cancel() {
      this.radio = '1'
      this.showExportGrade = false
      this.$refs['courseForm'].resetFields()
      this.$refs['classForm'].resetFields()
      this.$refs['scoreForm'].resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.capsule {
  margin-right: 12px;
  box-sizing: border-box;
  border-radius: 8px !important;
  border: 1px solid #dcdfe6;
  height: 32px;
  overflow: hidden;

  .label {
    padding: 0 16px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
  }

  .active {
    color: #ffffff;
    background: #28b28b;
  }
}

.appraise_container {
  margin-top: 24px;
}

.header_search {
  width: 1200px;
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;

  .ipt_search {
    display: flex;

    .search {
      width: 140px;
      margin-right: 12px;
    }
  }
}

.content {
  background: white;
  padding: 0 20px;
  box-sizing: border-box;
}

::v-deep .el-button {
  border-radius: 8px !important;
}

::v-deep .el-radio {
  margin-right: 0;
}

::v-deep .el-button--medium.is-circle {
  padding: 0;
}

.content_img {
  border: 0 !important;
  margin-left: 6px;
}

.semester {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.sign {
  color: #ffbf6b;
  font-size: 14px;
  margin-bottom: 10px;
}

.grade_detail {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  height: calc(100vh - 200px);
  overflow: auto;
}
</style>
